<template>
  <div class="ly-content">
    <div class="ly-center">
      <div class="member-head" @click="inputClick">
        <!--<img :src="ownHead" alt="" class="head">-->
        <div class="head" :style="{backgroundImage:'url('+ownHead+')'}"></div>
        <input ref="file" type="file" style="display: none" accept="image/*" capture="camera"
               @change="inputOnChange($event)"/>
        <div class="tips">人脸注册</div>
      </div>
      <yd-cell-group title="基础信息">

        <yd-cell-item>
          <span slot="left">昵称&nbsp;</span>
          <input slot="right" v-model="own.userName" type="text" readonly placeholder="请输入昵称">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">手机号&nbsp;</span>
          <input slot="right" v-model="own.cellPhone" type="number" readonly placeholder="请输入手机号">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">身份证号&nbsp;</span>
          <input slot="right" v-model="own.idCard" type="text" readonly placeholder="请输入身份证号">
        </yd-cell-item>
      </yd-cell-group>

    </div>


  </div>


</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";
  import Compressor from 'compressorjs';

  export default {

    data() {
      return {
        name: "",
        own: {
          faceImgUrl: '',
        },
        ownHead: '',
        housingId: '',
      }
    },
    created: function () {
      this.init();
    },
    mounted: function () {

    },
    methods: {

      init: function () {
        this.housingId = storage.getObj("housingId").id;
        http.get("/communityApps/personalCenter/userInfo").then(res => {
          if (res.data.code == 20000) {
            this.own = res.data.data;
            this.ownHead = res.data.data.faceImgUrl;
            if (res.data.data.isAuthentication == -1) {
              this.$dialog.toast({
                mes: '暂未认证房间，请先认证房间再试！',
                timeout: 1500,
                icon: 'error',
                callback: () => {
                  this.$router.push("/user/roomList")
                }
              });
            }

          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

      inputClick: function () {
        this.$refs.file.click();
      },
      inputOnChange: function (e) {

        const file = e.target.files[0];
        if (!file) {
          return;
        }
        this.$dialog.loading.open('图片上传中...');
        new Compressor(file, {
          quality: 0.5,
          success: (result) => {
            this.$dialog.loading.close();
            const formData = new FormData();
            formData.append('file', result, result.name);
            formData.append('housingId', storage.getObj("housingId").id);
            http.postFile("/communityApps/personalCenter/face", formData).then(res => {
              if (res.data.code == 20000) {
                this.ownHead = res.data.data + '?r='+Math.random();
                this.$dialog.toast({
                  mes: "人脸添加成功！",
                  timeout: 500,
                });
              } else {
                this.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
                this.ownHead = "";
              }
            });

          },
          error(err) {
            console.log(err.message);
          },
        });
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .member-head {
    width: 100%;
    height: 3.8rem;
    background: #fff url(../../assets/upload.png) no-repeat center;
    -webkit-background-size: 1.5rem;
    background-size: 1.5rem;
    border-bottom: 1px solid #eee;
    .head {
      width: 2.2rem;
      height: 2.2rem;
      margin: 0 auto;
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 99%;
      position: relative;
      top: 0.8rem;
    }
    .tips {
      text-align: center;
      color: #666;
      margin-top: 0.9rem;
    }
  }

</style>

